@page "/Liquid_Chart"



<Tabs>
    <TabPane Key="1" Tab="Sample 1">
        <Liquid Config="config1" />
    </TabPane>
    <TabPane Key="2" Tab="Sample 2">
        <Liquid Config="config2" />
    </TabPane>
    <TabPane Key="3" Tab="Sample 3">
        <Liquid Config="config3" />
    </TabPane>
    <TabPane Key="4" Tab="Sample 4">
        <Liquid Config="config4" />
    </TabPane>
</Tabs>

<Divider>动手实验</Divider>
<DynamicExample @ref="@example">
    <Liquid @ref="@chart" />
</DynamicExample>

@code{

    public IChartComponent chart;
    DynamicExample example;

    protected override void OnAfterRender(bool firstRender)
    {
        base.OnAfterRender(firstRender);
        example.Chart = chart;
    }

    #region 示例1

    LiquidConfig config1 = new LiquidConfig()
    {
        Percent = (decimal?)0.25,
        Outline = new LiquidOutline()
        {
            Border = 4,
            Distance = 8
        },
        Wave = new LiquidWave()
        {
            Length = 128
        }
    };

    #endregion

    #region 示例2

    LiquidConfig config2 = new LiquidConfig()
    {
        Percent = new decimal(0.25),
        Shape = "rect",
        Outline = new LiquidOutline()
        {
            Border = 2,
            Distance = 4
        },
        Wave = new LiquidWave()
        {
            Length = 128
        }
    };

    #endregion

    #region 示例3

    LiquidConfig config3 = new LiquidConfig()
    {
        Percent = new decimal(0.25),
        Shape = "diamond",
        Outline = new LiquidOutline()
        {
            Border = 4,
            Distance = 8
        },
        Wave = new LiquidWave()
        {
            Length = 128
        }
    };

    #endregion

    #region 示例4

    LiquidConfig config4 = new LiquidConfig()
    {
        Percent = new decimal(0.65),
        Shape = "diamond",
        Outline = new LiquidOutline()
        {
            Border = 4,
            Distance = 8
        },
        Wave = new LiquidWave()
        {
            Length = 128
        },
        Pattern = new
        {
            Type = "line"
        }
    };

    #endregion
}

